<template>
  <div class="my-coupon-container">
    <div class="header-area">
      <h2 class="title">我的优惠券列表</h2>
      <router-link to="/couponList">
      <button class="go-get-btn" >去领取更多优惠券</button>
      </router-link>
    </div>

    <!-- 筛选按钮 -->
    <div class="tab-bar">
      <button
        v-for="(tab, index) in tabs"
        :key="index"
        @click="currentTab = tab.statues"
        :class="{ active: currentTab === tab.statues }"
      >
        {{ tab.label }}
      </button>
    </div>

    <!-- 优惠券列表 -->
    <div class="coupon-list">
      <div
        class="coupon-card"
        v-for="item in filteredCoupons"
        :key="item.userCoupon.userCouponId"
        :class="statusClass(item.userCoupon.statues)"
      >
        <div class="coupon-left">
          <div class="amount">
            ¥{{ item.coupon.couponValue }}
          </div>
        </div>

        <div class="coupon-right">
          <div class="name">{{ item.coupon.couponName }}</div>
          <div class="desc">{{ item.coupon.couponType }}</div>
          <div class="date">有效期至：{{ formatDate(item.coupon.endTime) }}</div>
          <span class="status-tag">{{ statusText(item.userCoupon.statues) }}</span>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-if="filteredCoupons.length === 0" class="empty-box">
        <p>暂无符合条件的优惠券</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import { getUserCouponsByStatus } from '../api/userCoupon.js';

const route = useRoute();
const userId = route.query.userId;

const currentTab = ref(-1); // -1 表示全部

const tabs = [
  { label: '全部', statues: -1 },
  { label: '未使用', statues: 1 },
  { label: '已使用', statues: 0 },
  { label: '已过期', statues: 2 }
];

const couponList = ref([]);

const getAllUserCoupons = async () => {
  try {
    const res = await getUserCouponsByStatus(userId, currentTab.value);
    couponList.value = res.data.data || []; // ✅ 数据取这里
  } catch (e) {
    console.error("❌ 查询异常: ", e);
  }
};

onMounted(getAllUserCoupons);

// 切换 tab 时加载
watch(currentTab, getAllUserCoupons);


const filteredCoupons = computed(() => {
  if (currentTab.value === -1) return couponList.value; // 全部状态
  return couponList.value.filter(item => item.userCoupon.statues === currentTab.value); // 修正为 status
});


const statusText = (s) => ({
  1: '未使用',
  0: '已使用',
  2: '已过期'
}[s]);

const statusClass = (s) => ({
  1: 'valid',
  0: 'used',
  2: 'expired'
}[s]);

const formatDate = (d) => d?.substring(0, 10);
</script>


<style scoped>
.header-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.go-get-btn {
  background-color: #a2131d;
  border: none;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.go-get-btn:hover {
  background-color: #a2131d;
}

.my-coupon-container {
  padding: 30px 80px;
}
.title {
  font-size: 26px;
  font-weight: bold;
}
.sub-title {
  margin-top: 4px;
  color: #888;
}
.tab-bar {
  margin: 20px 0;
}
.tab-bar button {
  padding: 6px 20px;
  border-radius: 30px;
  border: 1px solid #aaa;
  margin-right: 10px;
  background: #fff;
  cursor: pointer;
}
.tab-bar button.active {
  background: #a2131d;
  color: #fff;
  border-color: #a2131d;
}

.coupon-card {
  display: flex;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  padding: 15px;
  align-items: center;
}
.coupon-left {
  width: 120px;
  text-align: center;
  border-right: dashed 1px #ccc;
}
.amount {
  font-size: 28px;
  color: #a2131d;
  font-weight: bold;
}
.coupon-right {
  padding-left: 18px;
}
.name { font-weight: bold; font-size: 18px; }
.date { color: #888; font-size: 13px; margin-top: 5px; }
.status-tag {
  margin-top: 6px;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
}
.valid .status-tag { background: #a2131d; color: white; }
.used .status-tag { background: #bbb; color: white; }
.expired .status-tag { background: #666; color: white; }

.empty-box {
  text-align: center;
  margin-top: 80px;
}
.empty-img {
  width: 140px;
}
</style>
